<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.workstation" placeholder="请选择车间" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-date-picker
        v-model="listQuery.datetime"
        type="week"
        format="yyyy 第 WW 周"
        placeholder="选择周"
        class="filter-item">
      </el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-row>
      <div ref="chart" class="chart" :style="chartStyle" />
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { fetchList } from '@/api/bdc/bdc-monitor'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
const selectOptions = [
  { key: 'HZ11_20', label: '焊装车间' },
  { key: 'TZ11_20', label: '涂装车间' },
  { key: 'ZZ11_20', label: '总装车间' }
]
const animationDuration = 3000
export default {
  name: 'WeeklyOutputChart',
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        workstation: undefined,
        datetime: undefined
      },
      selectOptions: selectOptions,
      // echarts
      chart: null,
      chartStyle: {height: '500px', width: '100%'},
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    // test
    this.chartData = {
      expectedData: [100, 120, 161, 200, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    }
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      // this.getList()
      this.chartData = {
        expectedData: this.randomNumArr(250, 7),
      }
      this.setOptions(this.chartData)
    },
    randomNumArr(limit, length) {
      const numArr = []
      for (let i = 0; i < length; i++) {
        const element = Math.ceil(Math.random() * limit)
        numArr.push(element)
      }
      return numArr;
    },
    // 重置
    handleReset() {
      this.listQuery = {
        workstation: undefined,
        datetime: undefined
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // grid: {
        //   top: 10,
        //   left: '2%',
        //   right: '2%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: 'pageA',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: expectedData,
          animationDuration,
          itemStyle: {
            normal: {
              color: (params) => {
                let color;
                params.data < 200 ? color =  'red' : color = 'green';
                return color;
              },
              lineStyle: {
                color: 'green',
              },
              // 显示点值
              label: {
                show: true,
                position: 'top'
              }
            }
          },
          // 显示辅助线
          markLine:{
            /*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
            symbol:"none",
            data: [
              {
                name: 'Y 轴值为 200 的水平线',
                yAxis: 200,
                lineStyle:{
                  normal:{
                    color:"red",
                    width:2,
                    type:"solid"
                  }
                }
              }
            ]
          },
        }]
      })
    }
  }
}
</script>